<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <title>显示网络场景</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        // 构建应用程序以显示地图的纬度和经度，比例和缩放级别
        // View提供了一种与地图进行交互，并检索有关地图位置信息

        require([
            'esri/Map',
            'esri/views/MapView',
            // add
            "esri/widgets/CoordinateConversion"
        ],function(
            Map,
            MapView,
            CoordinateConversion
        ) {
            var map = new Map({
                basemap:"topo-vector"
            });

            var view = new MapView({
                container:"viewDiv",
                map:map,
                center:[-118.80543,34.02700],
                zoom:13
            });

            // 添加HTML小部件
            var coordsWidget = document.createElement("div");
            coordsWidget.id = "coordsWidget";
            coordsWidget.className = "esri-widget esri-component";
            coordsWidget.style.padding = "7px 15px 5px";
            view.ui.add(coordsWidget,"bottom-right");

            // 显示地图信息
            // View类包含当前坐标信息。使用属性和事件显示地图坐标，比例和缩放级别。
            function showCoordinates(pt){
                var coords = "Lat/Lon" + 
                            pt.latitude.toFixed(3) + // 可把 Number 四舍五入为指定小数位数的数字
                            " " +
                            pt.longitude.toFixed(3) +
                            " | Scale 1:" +
                            Math.round(view.scale * 1) / 1 +
                            " | Zoom " +
                            view.zoom;
                coordsWidget.innerHTML = coords;
            };
            // showCoordinates当视图静止且指针移动时，添加事件和监视处理程序以调用该函数
            // 当视图静止时，它将显示中心位置。当指针移动时，它将显示当前指针位置
            // 使用toMap转换屏幕坐标到地图坐标

            // 视图静止：
                // 视图包含一些属性，如center，scale以及zoom这种变化动态地与地图用户与之交互
                // 当视图中发生不同事件时，您可以查看这些属性或检查其值
                // stationary属性：当视图开始移动和停止时，将更新该属性
            view.watch("stationary",function (isStationary){
                console.log(isStationary)
                showCoordinates(view.center)
            });

            view.on("pointer-move", function(evt) {
                console.log(evt)
                console.log(view.toMap({x:evt.x, y:evt.y}))
                showCoordinates(view.toMap({x:evt.x, y:evt.y}))
            });

            // // 2. 显示默认的 x / y 坐标

            // // 通过访问点的x和y值来更改输出以显示默认地图坐标
            // function showCoordinates2(pt) {
            // //*** UPDATE ***//
            //     var coords =
            //         "Lat/Lon " +
            //         pt.x.toFixed(3) +
            //         " " +
            //         pt.y.toFixed(3) +
            //         " | Scale 1:" +
            //         Math.round(view.scale * 1) / 1 +
            //         " | Zoom " +
            //         view.zoom;
            //     coordsWidget.innerHTML = coords;
            // };

            // view.watch("stationary",function (isStationary){
            //     showCoordinates2(view.center)
            // });

            // view.on("pointer-move", function(evt) {
            //     showCoordinates2(view.toMap({x:evt.x, y:evt.y}))
            // });

            // // 3. 使用CoordinateConversion小部件
            // var coordinateConversionWidget = new CoordinateConversion({
            //     view: view  // 另一种直接显示的方法
            // });

            // view.ui.add(coordinateConversionWidget, "bottom-right");

        })
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>